<template>
  <div class="app-container">
    <el-card class="box-card">
      <page-header ref="header"
                   @submit="handleSubmit"
                   @change="handleFormData" />
      <br>
      <page-main :table-data="table"
                 :loading="loading"
                 @submit="handleSubmit"
                 @change="handleSortData" />
      <br>
      <page-footer :current="query.current"
                   :size="query.size"
                   :total="query.total"
                   @change="handlePaginationChange" />
    </el-card>
  </div>
</template>

<script>
import { getSonCompanyList } from '@/api/company'
import PageHeader from './components/header'
import PageMain from './components/main'
import PageFooter from './components/footer'

export default {
  name: 'CompanySet',
  components: { PageHeader, PageMain, PageFooter },
  data() {
    return {
      table: [],
      loading: false,
      query: {
        current: 1,
        size: 10,
        total: null,
        search: null,
        rule: null,
        field: null
      }
    }
  },
  created() {
    this.handleSubmit()
  },
  methods: {
    handlePaginationChange(val) {
      this.query.current = val.current
      this.query.size = val.size
      this.query.total = val.total
      this.$nextTick(() => {
        this.$refs.header.handleFormSubmit()
      })
    },
    handleSubmit() {
      this.loading = true
      getSonCompanyList(this.query)
        .then(res => {
          this.loading = false
          this.table = res.records
          this.query.total = res.total
        })
        .catch(err => {
          this.loading = false
        })
    },
    handleFormData(form) {
      this.query.search = form.search
    },
    handleSortData(sort) {
      this.query.rule = sort.rule,
        this.query.field = sort.field
    }
  }
}
</script>
